<template>
  <cu-layout :navProp="{ placeholder: true, bgColor: 'rgba(255,255,255)', title: '账单评价' }" :bgStyle="{ bgColor: 'rgb(255,255,0)' }">
    <view :class="[`${prefixCls}-Bill-evaluation-container`]">
      <view class="rate-list">
        <view class="rate-item" v-for="(item, index) in list" :key="index">
          <view class="left uv-line-1">{{ item.name }}</view>
          <view class="center"><uv-rate size="50rpx" v-model="item.value" activeColor="#f59a23"></uv-rate></view>
          <view class="right">{{ enumMap[item.value] || '一般' }}</view>
        </view>
      </view>
      <view class="rate-eval" v-for="(item, index) in all_question" :key="index">
        <view class="text">{{ item.string }}</view>
        <view class="recommend">
          <view class="left-text">{{ item.bad_answer }}</view>
          <view class="right-text">{{ item.good_answer }}</view>
        </view>
        <view class="rate">
          <view :class="['rate-style', { active: item.value >= indexs + 1 }]" v-for="(items, indexs) in 10" :key="index" @click="handleRate(item, items)">
            {{ items }}
          </view>
        </view>
      </view>
      <view class="text-area">
        <view class="title"> 建议（选填）</view>
        <uv-textarea v-model="content" count maxlength="100" placeholder="我们会虚心接受您的建议，做到更好~"></uv-textarea>
      </view>
      <view class="button-container">
        <uv-button :disabled="!isSubmit" type="primary" @click="handleSubmit()" text="提交"></uv-button>
        <uv-safe-bottom></uv-safe-bottom>
      </view>
    </view>
  </cu-layout>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { periodEvaluate, postEvaluate } from '../api'
export default {
  name: 'componentName',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      list: [],
      recommend: 0,
      content: '',
      start_result: [],
      all_question: [],
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters(['theme']),
    isSubmit() {
      return this.list.every((v) => v.value !== 0) && this.all_question.every((v) => v.value !== 0)
    },
    enumMap() {
      const map = {}
      this.start_result.map((v) => {
        map[v.key] = v.value
      })
      return map
    },
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    this.getData()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    async getData() {
      const { id } = this.$Route.query
      const { data } = await periodEvaluate({ id, type: 5 })
      this.list = data?.all_column.map((v) => {
        return { name: v.string, field: v.column_name, rate: v.column_score, id: v.id, value: 0 }
      })
      this.start_result = data?.start_result
      this.all_question = data?.all_question.map((v) => {
        return {
          ...v,
          value: 0,
        }
      })
    },
    async handleSubmit() {
      const { id } = this.$Route.query
      const map = {}
      this.list.forEach((v, i) => {
        map[v.field] = v.rate
        map[v.field + '_id'] = v.id
      })
      const mapData = {}
      this.all_question.forEach((v, i) => {
        mapData[v.column_name] = v.value
        mapData[v.column_name + '_id'] = v.id
      })
      const { data, errcode } = await postEvaluate({ id, content: this.content, ...map, ...mapData })
      if (errcode === 0) {
        uni.navigateBack(1)
      }
    },
    handleRate(item, items) {
      item.value = items
    },
  },
}
</script>

<style lang="scss" scoped>
page {
  background: white !important;
}
.#{prefixCls('Bill-evaluation-container')} {
  position: relative;
  // background: #f5f5f5;
  padding: 15px 15px 100px;
  box-sizing: border-box;
  overflow: hidden;
  .rate-list {
    display: flex;
    flex-direction: column;
    .rate-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
      .left {
        font-size: 28rpx;
        width: 60px;
      }
      .center {
      }
      .right {
        width: 80px;
      }
    }
  }
  .rate-eval {
    text-align: center;
    .text {
      margin: 20px 0;
      font-size: 16px;
    }
    .recommend {
      margin: 0px 0 10px;
      display: flex;
      justify-content: space-between;
    }
    .rate {
      display: flex;
      justify-content: space-evenly;
      .rate-style {
        width: 20px;
        background: #d7d7d7;
        color: black;
        padding: 5px;
      }
      .active {
        background: #f59a23;
        color: white;
      }
    }
  }
  .text-area {
    margin-top: 20px;
    .title {
      margin: 10px 0;
    }
  }
  .button-container {
    width: 100%;
    box-sizing: border-box;
    background: white;
    bottom: 0;
    position: fixed;
    left: 0;
    padding: 10px 15px;
  }
}
</style>
